<template>
  <div class="home-container">
    <!-- 数据加载状态 -->
    <div v-if="loading" class="loading-container">
      <el-skeleton :rows="5" animated />
    </div>

    <!-- 简化的Dashboard部分 - 使用v-show代替v-if避免组件销毁重建 -->
    <div v-show="!loading">
      <!-- 快捷入口 -->
      <DashboardQuickActions :quickActions="quickActions" />

      <!-- 案件开庭时间表 -->
      <DashboardCourtSchedule />
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted } from 'vue'
  // Dashboard相关子组件
  import DashboardContractAmountStats from './components/dashboard/DashboardContractAmountStats.vue'
  import DashboardCourtSchedule from './components/dashboard/DashboardCourtSchedule.vue'
  import DashboardQuickActions from './components/dashboard/DashboardQuickActions.vue'
  import { homeApi } from '@/api/home'

  // 定义类型
  interface ContractAmountStat {
    name: string
    contract_type: string
    contract_count: number
    contract_amount: number
    contract_amount_format: string
    payment_amount: number
    payment_amount_format: string
    trend?: {
      type: 'up' | 'down' | 'stable'
      value: number
    }
  }

  interface FinanceByPeriod {
    today: ContractAmountStat[]
    week: ContractAmountStat[]
    month: ContractAmountStat[]
    quarter: ContractAmountStat[]
  }

  // 统计数据
  const loading = ref(false)
  const financeByPeriod = ref<FinanceByPeriod>({
    today: [],
    week: [],
    month: [],
    quarter: [],
  })

  // 快捷入口数据 - 从后端获取
  const quickActions = ref<any[]>([])

  // 获取统计数据 - 只获取实际需要的数据
  const getDashboardStats = async () => {
    try {
      loading.value = true

      // 只获取快捷入口数据
      const dashboardResponse = await homeApi.getDashboardStats()
      if (dashboardResponse?.data?.quick_actions) {
        quickActions.value = dashboardResponse.data.quick_actions
      }

      // 合同金额统计功能已移除，直接设置为空数组
      financeByPeriod.value = {
        today: [],
        week: [],
        month: [],
        quarter: [],
      }
    } catch (error) {
      // 错误时也设置为空数组
      financeByPeriod.value = {
        today: [],
        week: [],
        month: [],
        quarter: [],
      }
    } finally {
      loading.value = false
    }
  }

  // 组件挂载时直接获取数据
  onMounted(getDashboardStats)
</script>

<style scoped>
  /* 主容器样式 */
  .home-container {
    padding: 20px;
    background-color: #f5f5f5;
    min-height: calc(100vh - 100px);
  }

  .loading-container {
    padding: 40px 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
  }

  /* 响应式设计 */
  @media (max-width: 768px) {
    .home-container {
      padding: 12px;
    }
  }
</style>
